<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { cloneDeep } from 'lodash'
import { onMounted, ref, reactive, onBeforeUnmount, watch } from 'vue'
let myChart = null
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  data1:{
    type: Array,
    default: () => [],
  },
  data2:{
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  // 图例名字 要与 series 中 name 保持一致
  legendText: {
    type: Array,
    default: () => ['隐患数量', '自查清理数量'],
  },
  limit: {
    type: Array,
    default: () => [0, 4],
  },
  isLoop: {
    type: Boolean,
    default: true,
  },
  grid: {
    type: Object,
    default: () => ({
      top: '23%',
      right: '10%',
      left: '13%',
      bottom: '15%',
    }),
  },
})
const propsCopy = reactive({
  xData: cloneDeep(props.xData),
  // sData: cloneDeep(props.sData),
  data1: cloneDeep(props.data1),
  data2: cloneDeep(props.data2),
})
const [startValue, endValue] = props.limit
const option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    // itemGap: 50,
    top: '1%',
    data: [...props.legendText],
    textStyle: {
      color: '#f9f9f9',
      borderColor: '#fff',
    },
  },
  grid: props.grid,
  // 控制显示几个柱子
  dataZoom: {
    show: false,
    startValue,
    endValue,
  },
  // dataZoom: {
  //     type: 'inside',
  //     maxValueSpan: 14
  // },
  xAxis: [
    {
      type: 'category',
      data: props.xData,
      axisLine: {
        lineStyle: {
          color: '#02387B',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        margin: 10,
        color: 'rgba(255,255,255,1)',
        textStyle: {
          fontSize: 12,
        },
        formatter: function (e) {
          //   console.log('@e===', e)
          //   let str = ''
          //   let arr = e.split('')
          //   for (let i = 0; i < arr.length; i++) {
          //     str += arr[i] + '\n'
          //   }
          return e
        },
      },
    },
  ],
  yAxis: [
    {
      name: '个',
      nameTextStyle: {
        align: 'right',
      },
      axisLabel: {
        formatter: '{value}',
        color: 'rgba(255,255,255,0.52)',
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(108, 128, 151, 0.3)',
        },
      },
    },
  ],
  series: [
    {
      name: `${props.legendText[0]}`,
      type: 'bar',
      data: props.data1,
      label: {
        normal: {
          position: 'top',
          color: '#fff',
          show: true,
        },
      },
      barWidth: '20%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#f01400',
            },
            {
              offset: 1,
              color: '#ff7a00',
            },
          ]),
        },
      },
      tooltip: {
        show: true,
        trigger: 'axis',
      },
    },
    {
      name: `${props.legendText[1]}`,
      type: 'bar',
      data: props.data2,
      label: {
        normal: {
          position: 'top',
          color: '#fff',
          show: true,
        },
      },
      barWidth: '20%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#15F7FF',
            },
            {
              offset: 1,
              color: '#15FFC5',
            },
          ]),
        },
      },
      tooltip: {
        show: true,
        trigger: 'axis',
      },
    },
  ],
})
const chart = ref()
const timer1 = ref(null)
function _clearInterval(timeId) {
  timeId && window.clearInterval(timeId)
}
const resizeHandler = () => {
  myChart.resize()
}
const initCharts = () => {
  if (myChart) {
    myChart.clear()
    myChart.dispose()
  }
  chart.value.removeAttribute('_echarts_instance_')
  myChart = echarts.init(chart.value)
  myChart.setOption(option.value)
  window.addEventListener('resize', resizeHandler)

  if (props.isLoop) {
    timer1.value = setInterval(() => {
      const item1 = propsCopy.xData.shift()
      propsCopy.xData.push(item1)
      // const item2 = propsCopy.sData.shift()
      // propsCopy.sData.push(item2)
      const item3 = propsCopy.data1.shift()
      propsCopy.data1.push(item3)
      const item4 = propsCopy.data2.shift()
      propsCopy.data2.push(item4)
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          show: true,
        },
        series: [
          {
            data: propsCopy.data1,
            type: 'bar',
            tooltip: {
              show: true,
              trigger: 'axis',
            },
          },
          {
            data: propsCopy.data2,
            type: 'bar',
            tooltip: {
              show: true,
              trigger: 'axis',
            },
          },
        ],
        xAxis: {
          type: 'category',
          data: propsCopy.xData,
        },
      })
    }, 4000)
  }
}
watch(
  () => props,
  (newValue, oldValue) => {
    propsCopy.xData = cloneDeep(newValue.xData)
    // propsCopy.sData = cloneDeep(newValue.sData)
    propsCopy.data1 = cloneDeep(newValue.data1)
    propsCopy.data2 = cloneDeep(newValue.data2)
    if (props.isLoop) {
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          show: true,
        },
        xAxis: {
          data: propsCopy.xData,
        },
        series: [
          {
            data: propsCopy.data1,
            tooltip: {
              show: true,
              trigger: 'axis',
            },
          },
          {
            data: propsCopy.data2,
            tooltip: {
              show: true,
              trigger: 'axis',
            },
          },
        ],
      })
    }
  },
  { deep: true }
)
onMounted(() => {
  initCharts()
})
onBeforeUnmount(() => {
  if (props.isLoop) {
    _clearInterval(timer1.value)
  }
  window.removeEventListener('resize',resizeHandler)
})
defineExpose({
  initCharts,
  props,
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
